window.addEventListener("load", function () {
	//功能1:点击回到顶部时，滚动条到顶部-----------------------------------------------------------
	$(".gun").addEventListener("click", function () {
		window.scrollTo({ left: 0, top: 0, behavior: "smooth" });
	});

	//功能2.1:动态渲染API分类区--------------------------------------------------------------------------
	// 模拟服务器上的传递过来的数据
	let apiTypeData = [
		{ name: "全部", keyword: "身份证实名", isnew: false },
		{ name: "生活服务", keyword: "银行卡", isnew: false },
		{ name: "金融科技", keyword: "短信", isnew: false },
		{ name: "交通地理", keyword: "天气", isnew: false },
		{ name: "充值缴费", keyword: "短信", isnew: false },
		{ name: "数据智能", keyword: "手机归属地", isnew: false },
		{ name: "企业工商", keyword: "IP", isnew: false },
		{ name: "应用开发", keyword: "手机归属地", isnew: false },
		{ name: "电子商务", keyword: "IP", isnew: false },
		{ name: "吃喝玩乐", keyword: "视频", isnew: false },
		{ name: "文娱视频", keyword: "视频", isnew: false },
		{ name: "免费接口大全", keyword: "短信", isnew: true },
		{ name: "短信", keyword: "身份证实名", isnew: false },
		{ name: "汽车", keyword: "银行卡", isnew: false },
		{ name: "核验", keyword: "银行卡", isnew: false },
		{ name: "最新发布", keyword: "银行卡", isnew: true },
		{ name: "API私有化部署", keyword: "身份证实名", isnew: true },
	];
	//1.获取后台数据进行遍历
	let html = "";
	apiTypeData.forEach(function (v, i) {
		//2.遍历时拼接html结构
		//如何将激活样式和加粗效果加上
		if (i === 0) {
			//默认第一个元素为激活状态
			html += `<li class="active" title=${v.keyword}>${v.name}</li>`;
		} else if (v.isnew) {
			//为true的情况下属性加粗
			html += `<li class="fw-bold title="${v.keyword}">${v.name}</li>`;
		} else {
			html += `<li title=${v.keyword}>${v.name}</li>`;
		}
	});
	//3.将拼接的html结构放入对应的位置
	$("#apiCateList").innerHTML = html;

	//功能2.2:API分类区点击后增加激活样式-------------------------------------

	$("#apiCateList li").forEach(function (v) {
		//给每一个li设置点击事件
		v.addEventListener("click", function () {
			//先排他,清除其他激活样式
			$("#apiCateList li").forEach(function (item) {
				item.classList.remove("active");
			});
			//再给其他被点击的对象增加激活样式
			v.classList.add("active");

			//功能2.3:点击API分类区的标签,联动下方的搜索框
			//1.将v的textContent赋值给strong
			$("#searchInput strong").textContent = v.textContent;
			//2.将v的title赋值给搜索框的value
			$("#searchInput input").value = v.title;
		});
	});

	//API列表区域 模拟服务器返回的数据
	const listDataArr = [
		//第一行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南",
			price: "免费1",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},

		//第二行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南",
			price: "免费2",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第三行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南",
			price: "免费3",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第四行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},
	];
	//功能三:卡片区动态渲染---------------------------------------------------------------------------------------------------

	/*	//1.获取后台数据,进行遍历
	let cardHtml = "";
	listDataArr.forEach(function (v) {
		//遍历时拼接为html结构
		cardHtml += `
		<li class="rel">
		<img src="../imgs/${v.img}" alt="图片已损坏" />
		<p>${v.name}</p>
		<p class=${v.isSpecial ? "fc-red" : "fc-green"}>${v.price}</p>
		${v.isSpecial ? '<span class="abs">企业认证</span>' : ""} 
		<a  class="abs" href="#">申请数据</a>
	</li>
		`;
	});
	//将html结构放入指定位置
	$("#apicardsList").innerHTML = cardHtml; */

	//功能四:点击分页器的页码时,增加激活样式--------------------------------------------------------------------------------------------

	//获取相关节点
	//给页码绑定点击事件
	$("#page ul li").forEach(function (v) {
		v.addEventListener("click", function () {
			//点击后先移出全部按钮的激活样式(排他思想)
			$("#page ul li").forEach(function (item) {
				item.classList.remove("active");
			});
			//再给自己增加激活样式
			v.classList.add("active");
			//功能五:点击分页器实现卡片区的分页
			render(Number(v.textContent), 5, listDataArr);
		});
	});
	//功能五:点击分页器实现卡片区的分页-------------------------------------------------------------------------------------------------------------

	//复用封函数,渲染函数
	//1.实现基本功能
	//2.确定函数名--render
	//3.确定函数参数---当前页码-pagination,每页条数-pageSize,原数据arr
	//4.确定函数返回值--不需要
	//5.将功能代码放入函数壳子,替换对应变量
	function render(pagination, pageSize, arr) {
		//求开始索引(当前页码-1)*每页条数
		let startIndex = (pagination - 1) * pageSize;
		//对数组进行处理
		const result = arr.slice(startIndex, startIndex + pageSize);
		//1.获取后台数据,进行遍历
		let cardHtml = "";
		result.forEach(function (v) {
			//遍历时拼接为html结构
			cardHtml += `
	    <li class="rel">
	        <img src="../imgs/${v.img}" alt="图片已损坏" />
	        <p>${v.name}</p>
	        <p class=${v.isSpecial ? "fc-red" : "fc-green"}>${v.price}</p>
	        ${v.isSpecial ? '<span class="abs">企业认证</span>' : ""} 
	        <a  class="abs" href="#">申请数据</a>
        </li>
	    `;
		});
		//将html结构放入指定位置
		$("#apicardsList").innerHTML = cardHtml;
	}
	//6.调用测试
	render(1, 5, listDataArr);
	//7.优化代码

	//功能六:点击申请数据按钮弹出蒙层----------------------------------------------------------------------------------------------------
	//1.获取相关节点
	//2.给公共祖先元素apicardsList绑定点击事件,事件委派
	$("#apicardsList").addEventListener("click", function (e) {
		//根据事件委派的localName属性进行区分,a标签
		if (e.target.localName === "a") {
			//4.弹出蒙层
			$("#mask").style.display = "block";
			//蒙层出现时滚动条消失
			document.body.style.overflow = "hidden";
			//阻止浏览器默认事件
			e.preventDefault();
		}
	});
	//5.点击蒙层关闭蒙层
	$("#mask").addEventListener("click", function () {
		this.style.display = "none";
		//蒙层消失后滚动条出现
		document.body.style.overflow = "auto";
	});
	//6.阻止登录框的事件传播
	$("#login").addEventListener("click", function (e) {
		e.stopPropagation();
	});
	//功能七:点击模态框中的tab按钮,对应按钮激活,显示对应的form表单--------------------------------------------------------------------------------------------------

	$("#login form")[0].style.display = "block"; //默认显示第一个表单
	//1.获取相关节点
	//2.给tab的按钮绑定点击事件
	$("#tab a").forEach(function (v, i) {
		v.addEventListener("click", function () {
			//3.先排他,移出所有的a标签的激活样式
			$("#tab a").forEach(function (item) {
				item.classList.remove("active");
			});
			//4.再给当前点击的a标签增加激活样式
			this.classList.add("active");
			//5.排他,移出所有显示的form表单
			$("#login form").forEach(function (each) {
				each.style.display = "none";
			});
			//6.切换对应的form表单
			$("#login form")[i].style.display = "block";
		});
	});
});
